<template>
  <div class="page">
    <m-header class="nm-titl" :title="proData &&proData.home_bottom_nav[1].name ||'服務中心'"></m-header>
    <swiper
      :options="swiperOption"
      class="swiper-wrap swiper-container-banner-box"
      v-if="banner.length!=0"
    >
      <swiper-slide
        v-for="(item, index) in banner"
        :key="index"
      >
        <img
          :src="api+item"
          class="title-img"
        />
      </swiper-slide>
      <!-- 常见的小圆点 -->
      <div
        class="swiper-pagination"
        v-for="(item,index) in banner"
        :key="index"
        slot="pagination"
      ></div>
    </swiper>
    <section class="body index-bg">
      <img class="service-img" :src="proData && api+proData.service_bg" v-if="proData.service_bg"/>
      <div class="box">
        <div class="help img-wrap" @click="goTo('Help')">
          <div>帮助中心</div>
          <img class="img" src="../../assets/images/gzlz/icon_help.png" />
        </div>
        <div class="customer img-wrap" @click="goTo('Customer')">
          <div>客服中心</div>
          <img class="img" src="../../assets/images/gzlz/icon_service.png" />
        </div>
        <div class="customer img-wrap" @click="goTo('speed_card')">
          <div>道具专区</div>
          <img class="img" src="../../assets/images/gzlz/icon_speed_card.png" />
        </div>
        <div class="customer img-wrap" @click="goTo('video')">
          <div>华夏99影视</div>
          <img class="img" src="../../assets/images/gzlz/video.png" style="filter: brightness(100); width: 15px;height: 15px;" />
        </div>
        <div class="customer img-wrap" @click="goTo('chat')">
          <div>聊天室</div>
          <img class="img" src="../../assets/images/gzlz/chat.png" />
        </div>
        <div class="customer help img-wrap" @click="goTo('ExchangeUsdt')">
          <div>加速卡USDT</div>
          <img class="img" src="../../assets/images/gzlz/icon_help.png" />
        </div>
      </div>
    </section>
    <m-Footer></m-Footer>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css"); //引入swiper.css

export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      defaultSrc: require('@/assets/images/gzlz/service-img.png'),
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2500,
          stopOnLastSlide: false,
          /* 触摸滑动后是否继续轮播 */
          disableOnInteraction: false
        },
        // 分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      },
      banner: [],
    }
  },
  computed: {
    ...mapGetters(['api', 'proData'])
  },
  methods: {
    initData() {
      this.banner = this.proData && this.proData.home_top_banner || [require('@/assets/images/new/banner.png')];
    },
    goTo(routeName) {
      if(routeName==='Customer'){
        window.open('https://tb.53kf.com/code/client/8c5643ef275b6e029b819a0f243c883d7/1')
        // this.$router.push({
        //   path: `/web-view/${encodeURIComponent('https://tb.53kf.com/code/client/8c5643ef275b6e029b819a0f243c883d7/1')}`
        // })
        // window.location.href='https://tb.53kf.com/code/client/8c5643ef275b6e029b819a0f243c883d7/1'
      }else if(routeName ==='chat'){
        window.open('http://www.dws.net.cn/app/index.php?i=5&c=entry&groupid=7&do=groupchatdetail&m=cy163_customerservice')
        // this.$router.push({
        //   path: `/web-view/${encodeURIComponent('http://www.dws.net.cn/app/index.php?i=5&c=entry&groupid=7&do=groupchatdetail&m=cy163_customerservice')}`
        // })
        // window.location.href='http://www.dws.net.cn/app/index.php?i=5&c=entry&groupid=7&do=groupchatdetail&m=cy163_customerservice'
      }else if(routeName==='speed_card'){
        window.open('http://www.91fka.com/links/B0CF08F7')
        // this.$router.push({
        //   path: `/web-view/${encodeURIComponent('http://www.91fka.com/links/B0CF08F7')}`
        // })
        // window.location.href='http://www.91fka.com/links/B0CF08F7'
      }else if(routeName==='video'){
        window.open('http://www.99sgou.com/index.html')

        // this.$router.push({
        //   path: `/web-view/${encodeURIComponent('http://www.99sgou.com/index.html')}`
        // })
        // window.location.href='http://www.99sgou.com/index.html'
      }else {
        this.$router.push({ name: routeName });
      }
    }
  },
  mounted() {
    this.initData();
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.page {
  // background-image: url("../../assets/images/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  .index-bg {
    padding-bottom: 0!important;
  }
}
.nm-titl {
  padding: 20px 0 30px;
}
.swiper-slide-prev {
  transform: translate3d(0px, 0px, -100px) rotateX(0deg) rotateY(-50deg) !important;
}
.swiper-slide-next {
  transform: translate3d(0px, 0px, -100px) rotateX(0deg) rotateY(50deg) !important;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: none;
}
.swiper-wrap .title-img {
  height: 100%;
  width: 100%;
}
.swiper-container-banner-box {
  width: 700px!important;
  height: 340px;
  img {
    border-radius: 20px !important;
  }
}

.body {
  // background: @bg-color;
  //.display-flex();

  color: @bg-color-white;
  .service-img {
    width: 71%;
  }
  .box {
    display: flex;
    flex-wrap: wrap;
  }
  .img-wrap {
    margin: 45px auto 0;
    background: url("../../assets/images/new/2-0.png") no-repeat;
    background-size: 100% 100%;
    height: 64px;
    width: 330px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
      margin-right: 20%;
    }
    div {
      font-size: 24px;
      width: 55%;
      text-align: center;
    }
  }
}
</style>
